<template>
    <view>
        <nav-bar type="transparentFixed"
                 transparentFixedFontColor="#FFF"
                 :bgColor="['#fff','#fff']"
                 title=" ">
        </nav-bar>
        <view class="margin_bottom_140">
            <!-- <view class="my_swiper"> -->
            <u-swiper mode="number"
                      indicator-pos="bottomRight"
                      :list="swiperList"
                      :bottomRpx="60"
                      duration="1000"
                      :autoplay="swiperAutoPlay"
                      :height="375"
                      :circular="false">

            </u-swiper>
            <!-- </view> -->
            <view class="details_box">
                <view class="price_box">
                    <span>￥</span><span class="price">{{ currentSkuData.priceDouble }}</span><span>起</span>
                </view>
                <view class="details_item_box">
                    <view class="title_box">
                        <view class="title1">{{ detailsData.productResp.name }}</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_nj@2x.png"
                               mode="" />
                        <view class="details_info_text"> 年级：
                            <span v-for="(item,index) in detailsData.childrenClasss"
                                  :key="index">{{ item +'，' }}</span>
                        </view>
                    </view>

                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_time@2x.png"
                               mode="" />
                        <view v-if="detailsData.weekStr"
                              class="details_info_text">课程：一周{{ detailsData.weekStr.length == 1 ? '一':'两' }}节课，{{ detailsData.weekStr.join(',') }} 上课</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_time@2x.png"
                               mode="" />
                        <view class="details_info_text">上课时间：{{ detailsData.weekStr[0] + ','+ detailsData.schoolTimeStr[0] + ';' + (detailsData.weekStr.length >1 ? detailsData.weekStr[1] + ','+ detailsData.schoolTimeStr[1] : '') }}</view>
                    </view>
                    <view class="details_info u-flex">
                        <image class="details_info_img"
                               src="/static/images/common_icon_person@2x.png"
                               mode="" />
                        <view class="details_info_text">人数：{{ detailsData.stock }}</view>
                    </view>
                    <view class="grey_box u-flex u-row-between">
                        <view class="details_info_text">剩余名额：{{ detailsData.residueStock }}</view>
                        <view class="details_text_999">{{ detailsData.stock - detailsData.residueStock }}人已报名</view>
                    </view>
                </view>
                <view class="details_item_box"
                      v-for="(item,index) in detailTabs"
                      :key="index">
                    <view class="title_box u-flex">
                        <span class="title1">{{ item.title }}</span>
                    </view>
                    <u-parse :html="item.tabDetails"></u-parse>
                </view>
                <!-- <view class="details_item_box">
                    <view class="title_box u-flex">
                        <span class="title1">{{ '购买须知' }}</span>
                    </view>
                    <view>{{ detailsData.productResp.note }}</view>
                </view> -->
            </view>
        </view>
        <div class="footer_box safe-area-inset-bottom u-flex u-row-between">
            <view class="price_number">
                <span>￥</span><span class="price">{{ currentSkuData.priceDouble }}</span>
            </view>
            <u-button class="btn_box"
                      @click="buyBtnClick()"
                      type="primary"
                      :custom-style="customStyle"
                      :disabled="canSignUp"
                      :ripple="true"
                      shape="circle">{{ '报名' }}</u-button>
        </div>
        <view style="height: 1px;"></view>
        <u-popup v-model="buyModelShow"
                 safe-area-inset-bottom
                 closeable
                 mode="bottom"
                 border-radius="28">
            <view class="buy_box">
                <view class="hear_box u-flex">
                    <image class="buy_img"
                           :src="currentSkuData.pic"
                           mode="" />
                    <view class="price_number">
                        <span>￥</span><span class="price">{{ currentSkuData.priceDouble }}</span>
                    </view>
                </view>
                <view class="border_box"></view>
                <view v-for="(item,index) in specificationsList"
                      :key="index">
                    <view class="buy_title">{{ item.name }}
                        <!-- <span class="details_text_999">（不含材料费，材料自愿购买）</span> -->
                    </view>
                    <scroll-view class="sku_item_box"
                                 scroll-with-animation
                                 show-scrollbar="false"
                                 scroll-x>
                        <!--  :class="{'active': specialSpecSelectIndexArr[index] == index1 && checkSpecialSpecList[index][index1], 'disabled':!checkSpecialSpecList[index][index1]}" -->
                        <view class="sku_item"
                              :class="{'active': specialSpecSelectIndexArr[index] == index1, }"
                              v-for="(item1,index1) in item.values"
                              :key="index1"
                              @click="changeSpecification(index, index1)">
                            {{ item1 }}
                        </view>
                    </scroll-view>
                </view>
                <view class="u-flex">
                    <u-button style="flex:1;margin-right:30rpx;"
                              @click="addShopCart"
                              type="primary"
                              plain
                              :disabled="checkSpecialSpec"
                              :custom-style="customStyle1"
                              :ripple="true"
                              shape="circle"> 加入购物车 </u-button>
                    <u-button style="flex:1;"
                              @click="confirmOrder"
                              type="primary"
                              :disabled="checkSpecialSpec"
                              :custom-style="customStyle1"
                              :ripple="true"
                              shape="circle"> 确定 </u-button>
                </view>

            </view>
        </u-popup>
        <u-popup v-model="showCustomerQrCode"
                 width="80%"
                 mode="center"
                 border-radius="28">
            <view class="customer_box">
                <view class="title">{{'该课程已满员，如还想报名可添加教务微信排队，排队满15人即可开班' }}</view>
                <image class="customer_code"
                       :src="customerService"
                       mode="widthFix" />
                <u-button @click="saveImage"
                          type="primary"
                          :ripple="true"
                          shape="circle"> 保存到手机 </u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            swiperAutoPlay: true,
            customStyle: {
                width: '200rpx',
                height: '80rpx',
                // background: 'linear-gradient(154deg, #7CC3F2 0%, #2979FF 100%)',
                borderRadius: '40rpx',
            },
            customStyle1: {
                marginTop: '50rpx',
            },
            swiperList: [],
            detailsData: {
                productResp: {
                    specialSpec: '',
                    skuList: [],
                },
            },
            skuList: [],
            // 课程详情富文本内容
            detailTabs: [],
            needMaterial: false,
            buyModelShow: false,
            specificationsList: [],
            specialSpecSelectIndexArr: [],
            currentSkuData: {},
            studentCurriculumList: [],
            checkSpecialSpec: false,
            checkSpecialSpecList: [],
            showCustomerQrCode: false,
            customerService: '',
        };
    },
    watch: {
        specialSpecSelectIndexArr: {
            handler(newVal, oldVal) {
                let key = newVal.join('-')
                this.currentSkuData = this.detailsData.productResp.skuList.find(ele => ele.speciaId == key)
                if (!this.currentSkuData || this.currentSkuData.priceDouble == 0 || !this.currentSkuData.online) {
                    this.$interactive.toast('该组合无库存，请选择其他组合', 500)
                    this.checkSpecialSpec = true
                } else {
                    this.checkSpecialSpec = false
                }
                console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>currentSkuData', newVal, this.currentSkuData)
            },
            deep: true
        }
    },
    computed: {
        price() {
            if (this.needMaterial) {
                return this.detailsData.tuition + this.detailsData.material
            } else {
                return this.detailsData.tuition
            }
        },
        canSignUp() {
            let index = this.studentCurriculumList.findIndex(ele => this.detailsData.week == ele.week)
            console.log('>>>>>>>>>>>>>>>>>>>>>>>index', index)
            if (index != -1) {
                return true
            } else {
                return false
            }
        },
    },
    onShow() {
        this.getStudentClassPage()
    },
    onLoad(option) {
        // this.detailsData = option.detailData && JSON.parse(decodeURIComponent(option.detailData))
        // console.log('>>>>>>>>>>>>>>>>>>>>>', this.detailsData)
        if (option.itemId) {
            this.itemId = option.itemId
        }
        this.getClassScheduleById()
    },
    mounted() {
    },
    methods: {
        // 获取已报名课程列表
        getStudentClassPage() {
            this.$api.studentClassPage({}, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.studentCurriculumList = res.data
                }
            });
        },
        addShopCart() {
            let currentChildrenData = uni.getStorageSync('currentChildren')
            let data = {
                childId: currentChildrenData.childrenId,
                classScheduleId: this.itemId,
                skuId: this.currentSkuData.id,
                num: 1,
            }
            this.$api.addCart(data, res => {
                if (res.code == 0) {
                    setTimeout(() => {
                        this.$interactive.toast('已加入购物车')
                    }, 300);
                }
            });
        },
        confirmOrder() {
            this.currentSkuData.name = this.detailsData.productResp.name
            this.currentSkuData.specialSpec = this.specificationsList
            this.currentSkuData.classSchduleId = this.itemId
            this.currentSkuData.weekStr = this.detailsData.weekStr
            this.currentSkuData.schoolTimeStr = this.detailsData.schoolTimeStr
            this.buyModelShow = false
            this.$goto('push', '/pages/submitOrder/submitOrder?orderData=' + JSON.stringify(this.currentSkuData))
        },
        getClassScheduleById() {
            this.$api.getClassScheduleById({ id: this.itemId }, res => {
                if (res.code == 0 && res.data && res.data.productResp) {
                    let speciaId = []
                    let checkList = []
                    if (res.data.productResp.specialSpec) {
                        this.specificationsList = JSON.parse(res.data.productResp.specialSpec)

                        this.specificationsList.forEach((ele, index) => {
                            // let checkItemList = []
                            // ele.values.forEach((element, index1) => {
                            //     let key = index + '-' + index1
                            //     let has = res.data.productResp.skuList.findIndex(ele1 => ele1.speciaId == key)
                            //     console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>has', key, has)
                            //     if (has == -1) {
                            //         checkItemList.push(false)
                            //     } else {
                            //         checkItemList.push(true)
                            //     }
                            // });
                            // checkList[index] = checkItemList
                            speciaId.push(0)
                        });
                        this.checkSpecialSpecList = checkList
                        this.skuList = res.data.productResp.skuList
                        this.specialSpecSelectIndexArr = speciaId
                        console.log('>>>>>>>>>>>>>>>>>> this.specificationsList', this.specialSpecSelectIndexArr)
                    }
                    this.detailTabs = JSON.parse(res.data.productResp.detailTabs)
                    let arr = res.data.productResp.albumPics.split(',')
                    if (res.data.productResp.mainVideo) {
                        // 轮播图展示视频
                        this.swiperAutoPlay = false
                        arr.unshift(res.data.productResp.mainVideo)
                    }
                    this.swiperList = arr
                    this.detailsData = res.data
                    if (this.detailsData.residueStock == 0) {
                        this.currentChildren()
                    }
                }
            });
        },
        // 获取当前使用孩子
        currentChildren() {
            let _this = this
            this.$api.currentChildren({}, res => {
                if (res.code == 0 && res.data) {
                    this.customerService = res.data.customerService
                }
            });
        },
        // checkSpecialSpecFun(index, index) {
        //     let key = index + '-' + index1
        //     let eleData = this.skuList.find(ele1 => ele1.speciaId == key)
        //     console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>has', key, has)
        //     if (!eleData || !eleData.online) {
        //         return true
        //     } else {
        //         return false
        //     }
        // },
        arrGroup() {
            return Array.prototype.reduce.call(
                arguments,
                function (a, b) {
                    var ret = [];
                    a.forEach(function (a) {
                        b.forEach(function (b) {
                            ret.push(a.concat([b]));
                        });
                    });
                    return ret;
                },
                [[]]
            );
        },
        // 改变sku相应规格值
        changeSpecification(index, index1) {
            this.$set(this.specialSpecSelectIndexArr, index, index1)
        },
        saveImage() {
            uni.downloadFile({  // 下载
                url: this.customerService,      // 图片下载地址
                success: res => {
                    console.log('>>>>>>>>>>>>>>>>', res)
                    if (res.statusCode === 200) {
                        uni.saveImageToPhotosAlbum({    //保存图片到系统相册。
                            filePath: res.tempFilePath, //图片文件路径
                            success: function () {
                                uni.showToast({
                                    title: '图片保存成功',
                                    icon: 'none',
                                });
                            },
                            fail: function (e) {
                                console.log(e);
                                uni.showToast({
                                    title: '图片保存失败',
                                    icon: 'none',
                                });
                            }
                        });
                    }
                }, fail: err => {
                    console.log('>>>>>>>>>>>>>>>>>>文件下载失败', err)
                }
            });
        },
        buyBtnClick() {
            if (this.detailsData.residueStock == 0) {
                this.showCustomerQrCode = true
            } else {
                this.buyModelShow = true
            }

        }
    }
}
</script>

<style lang="scss">
.padding_bottom_box {
    padding-bottom: 150rpx;
}
.my_swiper {
    position: relative;
}
.details_box {
    width: 100%;
    position: relative;
    top: 0rpx;
    background: #f5f5f5;
    padding: 32rpx;
    border-radius: 48rpx 48rpx 0 0;
    .price_box {
        color: #eb4b4b;
        font-size: 28rpx;
        margin-bottom: 32rpx;
        .price {
            font-size: 48rpx;
            font-weight: bold;
            margin: 20rpx 10rpx 20rpx 0;
        }
    }
    .details_item_box {
        padding: 32rpx;
        background: #ffffff;
        color: #333;
        border-radius: 32rpx;
        .title_box {
            margin-bottom: 32rpx;
        }
        .title1 {
            font-size: 32rpx;
            font-weight: bold;
        }
        .title2 {
            font-size: 28rpx;
            color: #999;
        }
        .details_info {
            margin-bottom: 20rpx;
        }
        .details_info_img {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }
        .details_info_text {
            font-size: 28rpx;
        }
        .line_height_46 {
            line-height: 46rpx;
        }
        .grey_box {
            background: #f5f5f5;
            padding: 32rpx;
            border-radius: 16rpx;
        }
    }
    .details_item_box + .details_item_box {
        margin-top: 16rpx;
    }
}

.price_number {
    color: #eb4b4b;
    font-size: 28rpx;
    .price {
        font-size: 48rpx;
        font-weight: bold;
        margin: 20rpx 10rpx 20rpx 0;
    }
}
.buy_box {
    font-size: 28rpx;
    padding: 32rpx;
    .hear_box {
        position: relative;
        .buy_img {
            width: 240rpx;
            height: 240rpx;
            margin-right: 40rpx;
            border-radius: 16rpx;
        }
    }
    .border_box {
        border: 1rpx solid #f5f5f5;
        margin-top: 30rpx;
    }
    .buy_title {
        margin: 30rpx 0;
        color: #333;
        font-weight: bold;
    }
    .sku_item_box {
        white-space: nowrap;
        .sku_item {
            display: inline-block;
            max-width: 250rpx;
            min-width: 150rpx;
            padding: 15rpx 20rpx;
            text-align: center;
            background: #f5f5f5;
            color: #333;
            border: 1rpx solid #f5f5f5;
            border-radius: 36rpx;
            &.active {
                background: #f0f9ff;
                color: #63b9f2;
                border: 1rpx solid #63b9f2;
            }
            &.disabled {
                background: #999;
                color: #666;
                text-decoration: line-through;
            }
        }
        .sku_item + .sku_item {
            margin-left: 16rpx;
        }
    }
    .select_buy {
        max-width: 250rpx;
        min-width: 150rpx;
        padding: 15rpx 20rpx;
        text-align: center;
        background: #f5f5f5;
        color: #333;
        border: 1rpx solid #f5f5f5;
        border-radius: 36rpx;
        &.active {
            background: #f0f9ff;
            color: #63b9f2;
            border: 1rpx solid #63b9f2;
        }
    }
}
.details_text_999 {
    color: #999;
    font-size: 28rpx;
    font-weight: 500;
}
.customer_box {
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    .customer_code {
        width: 400rpx;
        height: 400rpx;
        margin: 30rpx 0 50rpx 0;
    }
}
.btn_box {
    width: 180rpx;
}
</style>
